<template>
	<view class="container">
		<redPacketList :listData="redPacketList.coupon_list" :choose="choose"></redPacketList>
		<view class="col empty-view" v-if="redPacketList.coupon_list.length==0">
			<image :src="url+'/static/imgs/list-empty-common.png'"></image>
			<text class="empty-text">我的现金红包竟然是空的</text>
			<view class="empty-button" @click="toRedPacket">快去领红包</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import redPacketList from '../../../components/redPacketList.vue';
	import http from '../../../common/js/request.js';
	export default {
		data() {
			return {
				url: app.globalData.baseImgUrl,
				store_id: app.globalData.storeId,
				redPacketList: [], //独家红包信息
				choose: false
			}
		},
		components: {
			redPacketList
		},
		onLoad() {
			var that = this;
			that.getRedPacketList();
		},

		methods: {
			//获取独家红包信息
			getRedPacketList() {
				var that = this;
				if (app.globalData.redPacketList) {
					that.redPacketList = {};
					that.redPacketList.coupon_list = app.globalData.redPacketList;
					that.choose = true;
				} else {
					http.post('/api/v1/store/get_member_store_red', {
						store_id: that.store_id
					}, res => {
						that.redPacketList = res.datas;
					});
				}
			},
			//跳转到抢红包页
			toRedPacket(){
				uni.navigateTo({
					url: '/pages/store/redPacket/redPacket'
				});
			}
		}
	}
</script>

<style>
	/* 缺省样式 */
	.empty-view {
		margin-top: 183rpx;
		align-items: center;
		justify-content: center;
	}

	.empty-view image {
		width: 195rpx;
		height: 269rpx;
	}

	.empty-view .empty-text {
		margin-top: 80rpx;
		color: #333333;
		font-size: 36rpx;
	}

	.empty-view .empty-button {
		margin-top: 120rpx;
		width: 512rpx;
		height: 100rpx;
		background: rgba(255, 157, 17, 1);
		border-radius: 10rpx;
		font-size: 34rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 缺省样式 */
</style>
